<template>
  <div class="">
     <div class="merchantSettled" style="">
       <img src="../utils/img/settlement.jpg" alt="">
       <div class="down-header">
         <div><img style="width: 80px;height: 40px;" src="https://www.pacificshopmall.xyz/uploads/def/20231024/2a942f4b8c56e03dc656595e940ccd3a.jpg" alt=""></div>
         <div class="">
           <div class="lang" style="width:200px">
                 <div style="display: flex; color: #fff; font-size: 16px;" class="lang-default" @click="langTap">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'one'" src="../utils/img/english.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'two'" src="../utils/img/nationalFlag.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'three'" src="../utils/img/flagfour.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'four'" src="../utils/img/TWO.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'five'" src="../utils/img/TWO.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'six'" src="../utils/img/flagheight.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'seven'" src="../utils/img/flagten.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'eight'" src="../utils/img/flagseven.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'nine'" src="../utils/img/flagsix.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'ten'" src="../utils/img/flagnine.png" alt="">
                   <img style="width: 18px; margin-right: 10px;" v-if="types == 'eleven'" src="../utils/img/flagfive.png" alt="">
                   {{$t('language')}}
                 </div>
                 <div class="select" v-if="langSelect === true">
                  <div class="overall" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%; margin-right: 10px;" src="../utils/img/english.png" alt="">
                     <span @click="onLangTap('en','one')">English</span>
                  </div>
                  <!-- <span @click="onLangTap('fr')">Français</span> -->
            <!-- <span @click="onLangTap('lao')">ພາສາລາວ</span> -->
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/nationalFlag.png" alt="">
                     <span @click="onLangTap('zh-Hans','two')">
                      中文简体
                      </span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagfour.png" alt="">
                     <span @click="onLangTap('zh-Hant','three')">中文繁體</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/TWO.png" alt="">
                     <span @click="onLangTap('th','four')">ภาษาไทย</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagThree.png" alt="">
                     <span @click="onLangTap('ja','five')">日本語</span>
                  </div>
                   <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                      <img style="width: 18px; height: 18px; border-radius: 50%; margin-right: 10px;" src="../utils/img/flagheight.png" alt="">
                      <span @click="onLangTap('vi','six')">Ngônngữ Việt</span>
                   </div>
                   <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                      <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagten.png" alt="">
                      <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" @click="onLangTap('id','seven')">Bahasa Indonesia </span>
                   </div>

                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/th.jpg" alt="">
                    <span @click="onLangTap('hi','eight')">हिंदी भाषा</span>
                  </div>

                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/tr.png" alt="">
                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" @click="onLangTap('tr','nine')">Türkçe</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagnine.png" alt="">
                    <span @click="onLangTap('ar','ten')">بالعربيةة</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagfive.png" alt="">
                    <span @click="onLangTap('ko','eleven')">한국어</span>
                  </div>
                 </div>
               </div>
         </div>
       </div>
       <div class="content">
          <div class="content-text">
            <p class="title">{{$t('page.user.InchoiPartnership')}}</p>
            <p>
             {{$t('page.user.Ourpartner')}}
            <br />
            {{$t('page.user.Joinusnow')}}
            </p>
          </div>
       </div>
     </div>
     <div class="settled-wrapper wrapper_1200" style="">
       <!-- <div class="user-com-title">
         {{$t('page.index.applyFor')}}
       </div> -->
       <p style="font-size: 20px; font-weight: 700; color: #333; margin-top: 20px; margin-left: 20px;"> {{$t('page.user.Businessinformation')}}</p>
       <div class="settled-main">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                  @submit.native.prevent>
           <el-form-item :label="$t('page.users.settled.Name')" prop="name">
             <el-input v-model="ruleForm.name" :placeholder="$t('page.users.settled.storename')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.store.userName')" prop="username">
             <el-input v-model="ruleForm.username" :placeholder="$t('message.settled.emptyRealName')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.store.tel')" prop="phone">
             <el-input v-model="ruleForm.phone" :placeholder="$t('page.store.Pleasetel')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.store.emiltitle')" prop="idcard">
             <el-input v-model="ruleForm.idcard" :placeholder="$t('page.store.placeEmail')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.index.welcomeMsg')">
             <el-input v-model="ruleForm.store_welcome" :placeholder="$t('page.index.enterWelcomeMsg')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.index.distribution')">
             <el-input v-model="ruleForm.fenxiao_code" :placeholder="$t('page.index.distributionMsg')"></el-input>
           </el-form-item>
           <el-form-item :label="$t('page.index.logo')" required>
             <el-upload
               :action="upLoadUrl"
               list-type="picture-card"
               :limit="1"
               :show-file-list="false"
               accept="image/*"
               :before-upload="beforeAvatarUpload"
               :on-success="handleLogoSuccess"
               :on-remove="handleLogoRemove"
               :on-exceed="handleExceed"
             >
             <img v-if="logoImgUrl.length>0" :src="logoImgUrl[0]" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </el-form-item>
           <el-form-item :label="$t('page.index.banner')" required>
             <el-upload
               :action="upLoadUrl"
               list-type="picture-card"
               :limit="1"
               accept="image/*"
               :show-file-list="false"
               :before-upload="beforeAvatarUpload"
               :on-success="handleBannerSuccess"
               :on-remove="handleBannerRemove"
               :on-exceed="handleExceed"
             >
               <img v-if="bannerImgUrl.length>0" :src="bannerImgUrl[0]" class="avatar">
               <i v-else class="el-icon-plus"></i>
             </el-upload>
             <el-dialog :visible.sync="dialogVisible">
               <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>
           </el-form-item>
           <el-form-item :label="$t('page.index.photos')" required>
             <div class="text">
               {{ $t('page.index.place6') }}
               <span class="text-desc">{{$t('page.index.place5')}}({{$t('page.store.place2')}})</span>
             </div>
             <div class="imageUrl">
               <!-- 图片回填 -->
               <ul v-for="(item,index) in imgUrl" :key="index" class="el-upload-list el-upload-list--picture-card">
                 <li tabindex="0" class="el-upload-list__item is-success">
                   <img :src="item" alt="" class="el-upload-list__item-thumbnail">
                   <a class="el-upload-list__item-name"><i class="el-icon-document"></i></a>
                   <label class="el-upload-list__item-status-label"><i
                     class="el-icon-upload-success el-icon-check"></i></label>
                   <i class="el-icon-close"></i><i class="el-icon-close-tip">{{$t('page.index.pressdelete')}}</i><span
                   class="el-upload-list__item-actions">
                                   <span class="el-upload-list__item-delete" @click="handleRemove1(index)"><i
                                     class="el-icon-delete"></i></span></span>
                 </li>
               </ul>
             </div>
             <el-upload
               :action="upLoadUrl"
               list-type="picture-card"
               :limit="currentLimit"
               accept="image/*"
               :before-upload="beforeAvatarUpload"
               :on-success="handleSuccess"
               :on-remove="handleRemove"
               :on-exceed="handleExceed"
             >
               <i class="el-icon-plus"></i>
             </el-upload>
             <el-dialog :visible.sync="dialogVisible">
               <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>
           </el-form-item>
         </el-form>
       </div>
       <!--入驻协议-->
       <div v-if="showProtocal" class="protocolModal">
         <div class="protocolCount">
           <div class="protocolMain">
             <div class="title"> {{$t('page.store.agreement')}}</div>
             <div class="content">
               <div class="content-main" v-html="agreement"></div>
             </div>
             <div class="sureBbtn">
               <el-button type="primary" @click="showProtocal=false;checked=true;">{{$t('page.store.agree')}}</el-button>
             </div>
           </div>

         </div>
       </div>
     </div>
     <div style="text-align: center; margin-top: 30px;">
       <el-checkbox v-model="checked"> {{$t('page.store.agree')}}</el-checkbox>
       <span class="agreement" @click="showProtocal=true">《 {{$t('page.store.agreement')}}》</span>
     </div>
     <div style="text-align: center;margin-top:30px;">
       <el-button type="primary" @click="onSubmit">{{$t('page.store.submit')}}</el-button>
     </div>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {Message} from 'element-ui';
import sendVerifyCode from "@/mixins/SendVerifyCode";
export default {
  name: "merchantSettled",
  auth: "guest",
  mixins: [sendVerifyCode],
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error(this.$t('page.users.register.placePhone')));
      }
      // else if (!this.isCellPhone(value)) {//引入methods中封装的检查手机格式的方法
      //   callback(new Error(this.$t('page.users.register.placePhone')));
      // }
      else {
        callback();
      }
    };
    return {
      upLoadUrl: process.env.BASE_URL + "/api/upload/image/file",
      imgUrl: [],
      pics: [],
      logoImgUrl:[],
      logos:[],
      bannerImgUrl:[],
      banners:[],
      langSelect:false,
      tables: {
        /*表格数据*/
        tableData: [],
        /*默认显示页码*/
        currentPage: 1,
        /*总数*/
        total: 0,
        /*当前页*/
        page: 1,
        /*分页*/
        limit: 10,
        /*加载框*/
        tableLoading: false
      },
      ruleForm: {
        name: '',
        username: '',
        phone: '',
        yanzhengma: '',
        classification: '',
		invitation_code: '',
		idcard: '',
		mer_storeType: '',
        images: []
      },
      dialogImageUrl: '',
      dialogVisible: false,
      hideUpload: false,
      checked: false,
      showProtocal: false,
      isShowCode: false,
      codeVal: '',
      codeUrl: '',
      keyCode: '',
      codeKey: '',
      validate: false,
      array: [],
      array2: [],
      intention_id: '',
      agreement: '',
      types:'',
      rules: {
        name: [
          {required: true, message: this.$t('page.users.settled.storename') , trigger: 'blur'},
          {min: 3, max: 55, message: this.$t('page.index.tips7'), trigger: 'blur'}
        ],
        username: [
          {required: true, message: this.$t('message.settled.emptyRealName'), trigger: 'blur'},
          {min: 2, max: 40, message: this.$t('page.index.tips8'), trigger: 'blur'}
        ],
        // yanzhengma: [
        //   {required: true, message: this.$t('page.users.register.placeCode'), trigger: 'blur'}
        // ],
        phone: [
          {required: true, message: this.$t('page.users.settled.pleaseenter')+ 'tel', validator: checkphone, trigger: 'blur'}
        ],
        // invitation_code: [
        //   {required: true, message: this.$t('page.store.enterInvitationcode'), trigger: 'blur'}
        // ],
        idcard: [
          {required: true, message: this.$t('page.store.enterIDnumber'), trigger: 'blur'}
        ],
        // mer_storeType: [
        //   {required: true, message: this.$t('page.store.type'), trigger: 'blur'}
        // ],
        // classification: [
        //   {required: true, message: this.$t('message.settled.emptyCategory'), trigger: 'change'}
        // ]
      },
      uploadLimit: 10,
      currentLimit: 10
    };
  },
  fetch({store}) {
    store.commit("isBanner", false);
    store.commit("isHeader", false);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: this.$t('page.index.applyFor') + "-" + this.$store.state.titleCon
    }
  },
  beforeMount() {
    if(!this.$auth.loggedIn){
      this.$store.commit("isLogin", true);
    }
    this.intention_id = this.$route.query.intention_id;
    this.getClassfication();
    this.getStoreType();
    this.getAgreement();
    if (this.intention_id) this.getDetails(this.intention_id)
  },
  mounted() {
    this.types = this.$cookies.get("type");
  },
  methods: {
    langTap() {
      if (this.langSelect == true) {
        this.langSelect = false
      } else {
        this.langSelect = true
      }
    },
    onLangTap(e,types) {
      //写入缓存 $cookies
      //localStorage.setItem("locale", e);
      console.log('types',types)
      this.$cookies.set("type", types)
      this.$cookies.set("locale", e);
      //刷新页面
      location.reload();
    },
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    //编辑时候进来获取历史提交数据
    getDetails(id) {
      let that = this;
      that.$axios.get("/api/intention/detail/" + id).then(res => {
        let data = res.data;
        this.ruleForm = {
			name: data.mer_name,
			username: data.name,
			phone: data.phone,
			// yanzhengma: '',
			// classification: data.merchant_category_id,
			idcard: data.idcard,
			// invitation_code: data.invitation_code,
			// mer_storeType: data.mer_type_id,
      store_welcome:data.store_welcome,
      fenxiao_code:data.fenxiao_code

        };
        this.logos[0] = data.store_logo
        this.logoImgUrl[0] = data.store_logo
        this.banners[0] = data.store_banner
        this.bannerImgUrl[0] = data.store_banner
        this.imgUrl = data.images
        this.currentLimit = this.uploadLimit - this.imgUrl.length || -1;
        // this.pics = data.images
        this.checked = true;
      }).catch(err => {
        that.$message.error(err);
      });
    },
    //获取商户分类
    getClassfication() {
      let that = this;
      that.$axios.get("/api/intention/cate").then(res => {
        that.array = res.data
      }).catch(err => {
        that.$message.error(err);
      });
    },
    getStoreType() {
      let that = this;
      that.$axios.get("/api/intention/type").then(res => {
        that.array2 = res.data
      }).catch(err => {
        that.$message.error(err);
      });
    },
    //获取入驻协议内容
    getAgreement() {
      let that = this;
      that.$axios.get("/api/config").then(res => {
        that.agreement = res.data.sys_intention_agree
      }).catch(err => {
        that.$message.error(err);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    again() {
      this.getcaptcha()
    },
    getcaptcha() {
      let that = this;
      that.$axios.get("/api/captcha").then(res => {
        that.codeUrl = data.data.captcha; //图片路径
        that.codeVal = data.data.code; //图片验证码
        that.codeKey = data.data.key //图片验证码key
        that.isShowCode = true;
      }).catch(err => {
        that.$message.error(err);
      });
    },
    async code() {
      let that = this;
      if (!that.ruleForm.phone) return that.$message.error(this.$t('message.login.emptyPhone'));
      if (!/^[0-9+*\s]{4,26}$/i.test(that.ruleForm.phone)) return that.$message.error(this.$t('message.login.pleaseetphonenumber'));
      this.$axios.post("/api/auth/verify", {
        phone: that.ruleForm.phone,
        type: 'intention',
        key: that.keyCode
      }).then(res => {
        that.$message.success(res.message);
        that.sendCode();
      }).catch(err => {
        that.$message.error(err);
      });
    },
    onSubmit() {
      let that = this;
      if(!this.$auth.loggedIn){
        return Message.warning(this.$t('page.store.login'));
      }
      if (that.validateForm() && that.validate) {
        let requestData = {
			phone: that.ruleForm.phone,
			mer_name: that.ruleForm.name,
			name: that.ruleForm.username,
			// code: that.ruleForm.yanzhengma,
			// merchant_category_id: that.ruleForm.classification,
			idcard: that.ruleForm.idcard,
			// invitation_code: that.ruleForm.invitation_code,
			// mer_type_id: that.ruleForm.mer_storeType,
      store_welcome:that.ruleForm.store_welcome,
      fenxiao_code:that.ruleForm.fenxiao_code,
      store_logo:that.logos[0],
      store_banner:that.banners[0],
			images: that.imgUrl.concat(that.pics),
        }
        if (!requestData.images.length) {
          return Message.error(this.$t('page.store.place1'));
        }
        if (that.intention_id) {
          that.$axios.post("/api/intention/update/" + that.intention_id, requestData).then(res => {

            that.$message.success(res.message);
            that.$router.push({
              path: `/user/settle_record`,
              query: {
                type: 1
              }
            })
          }).catch(err => {
            that.$message.error(err);
          });
        } else {
          that.$axios.post("/api/intention/create", requestData).then(res => {
            that.$message.success(res.message);
            that.$router.push({
              path: `/user/settle_record`,
              query: {
                type: 1
              }
            })
          }).catch(err => {
            that.$message.error(this.$t('page.store.'+err));
          });
        }
      }
    },
    validateForm: function () {
      let that = this,
        value = that.ruleForm;
      if (!value.name) return Message.error(this.$t('page.users.settled.storename'));
      if (!value.username) return Message.error(this.$t('message.settled.emptyRealName'));
      if (!value.phone) return Message.error(this.$t('page.users.settled.pleaseenter') + ' tel');
      if (!/^[0-9+*\s]{4,26}$/i.test(value.phone)) return Message.error(this.$t('page.users.settled.pleaseenter') + ' tel');

	  // if (!value.invitation_code) return Message.error(this.$t('page.store.enterInvitationcode'));
      if (!value.idcard) return Message.error(this.$t('page.store.enterIDnumber'));
      // if (!value.mer_storeType) return Message.error(this.$t('page.store.type'));
      // if (!value.classification) return Message.error(this.$t('message.settled.emptyCategory'));
      if (!that.checked) return Message.error(this.$t('message.settled.emptyIsAgree'));
      // if (that.isShowCode && !that.codeVal) return Message.error('请填写图片验证码');
      that.validate = true;
      return true;
    },
    //上传图片前的图片验证回调
    beforeAvatarUpload(file) {
      //图片格式
      const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
      //图片大小
      const isLt2M = file.size / 1024 / 1024 <= 2;
      if (!isJPG) {
        this.$message.error(this.$t('page.store.place2'));
      }
      if (!isLt2M) {
        this.$message.error(this.$t('page.store.place4'));
      }
      const _this = this;
      return isJPG && isLt2M;
    },
    handleExceed() {
      this.$message.warning(this.$t('page.store.place5'));
    },

    handleRemove(file, fileList) {
      this.pics = [];
      fileList.forEach(item => {
        this.pics.push(item.response.data.url);
      });
      this.currentLimit = this.uploadLimit - this.pics.length - this.imgUrl.length || -1;
    },
    handleLogoRemove(file, fileList) {
      this.logos = [];
      fileList.forEach(item => {
        this.logos.push(item.response.data.url);
      });
    },
    handleBannerRemove(file, fileList) {
      this.banners = [];
      fileList.forEach(item => {
        this.banners.push(item.response.data.url);
      });
    },
    handleRemove1(index) {
      this.imgUrl.splice(index, 1)
      this.currentLimit = this.uploadLimit - this.imgUrl.length || -1;
    },
    handleLogoRemove1(index) {
      this.logoImgUrl.splice(index, 1)
    },
    handleBannerRemove1(index) {
      this.bannerImgUrl.splice(index, 1)
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
    },
    handleSuccess(response) {
      if (response.status === 200) {
        this.pics.push(response.data.path);
      } else if (response.status === 400) {
        this.$message.error(response.msg);
      }
    },
    handleLogoSuccess(response,file) {
      if (response.status === 200) {
        this.logos.push(response.data.path);
        this.logoImgUrl=[URL.createObjectURL(file.raw)]
      } else if (response.status === 400) {
        this.$message.error(response.msg);
      }
    },
    handleBannerSuccess(response,file) {
      if (response.status === 200) {
        this.banners.push(response.data.path);
        this.bannerImgUrl=[URL.createObjectURL(file.raw)]
      } else if (response.status === 400) {
        this.$message.error(response.msg);
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .lang {
      position: relative;
      width: 160px;
      display: block;
      // text-align: center;
      margin-left:20px;
      .select {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 100%;
        background-color: #fff;
        padding: 5px 10px 10px 10px;
        height: 300px;
        overflow-y: auto;
  	    z-index:99;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            span {
              display: block;
              line-height: 36px;
              text-align: center;
              color: #000;
              z-index: 999;
              &:hover {
                color: #f89900;
              }
            }
        // .overall{
        //   &:hover{
        //     background-color: #f89900;
        //     opacity: 0.1;
        //   }

        // }
      }
    }
  .select::-webkit-scrollbar{
          width: 6px;
          height: 6px;
  }
  .select::-webkit-scrollbar-thumb{
         border-radius: 2px;
         background:#c7c7c7;
  }
  .select::-webkit-scrollbar-track{
         border-radius: 2px;
         background: #flflfl;
  }
.merchantSettled{
  position: relative;
  img{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: -1;
  }
  .down-header{
    height: 70Px;
        width: 1200Px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 0;
        left: 50%!important;
        transform: translateX(-50%);
        z-index: 10;
  }
  .content{
    width: 1200Px;
        height: 420Px;
        margin: 0 auto;
        position: absolute;
        padding-bottom: 100Px;
        left: 50%!important;
        top: 0;
        transform: translateX(-50%);
    .content-text{
          width: 58%;
          position: absolute;
          top: 12%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          p{
            font-size: 20px;
                color: #a6a6a6;
          }
        .title{
              color: #f89220;
              font-size: 48Px;
              margin-bottom: 4Px;
              margin-top: 1.875rem;
        }
    }
  }
}
.settled-wrapper {
  background: #fff;
  padding: 0 91px 44px 109px;
  margin-top:-50px;
  border: 1px solid #eee;
  .user-com-title {
    font-size: 20px;
    color: #282828;
    text-align: center;
    line-height: 30px;
    border-bottom: 1px solid #EFEFEF;
  }

  .demo-ruleForm {
    margin-top: 30px;

    .el-form-item {
      margin-bottom: 34px;
    }

    .el-input {
      width: 330px;
      height: 36px;
      line-height: 36px;
    }

    .verifiCode {
      width: 200px;

    }

    .code {
      width: 96px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      color: #E93323;
      border: 1px solid #E93323;
      border-radius: 4px;
      margin-left: 14px;
      background: #fff;
    }

    .el-form-item__label, .text {
      color: #666666;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #666666;
    }

    .text-desc {
      font-size: 12px;
      color: #999999;
    }

  }

  .agreement {
    color: #E93323;
    font-family: 'PingFang SC';
    cursor: pointer;
  }
}

.hide .el-upload--picture-card {
  display: none;
}
.el-upload--picture-card{
  .avatar{
    width: 100%;
    height: 100%;
  }
}

.protocolModal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .protocolCount {
    width: 900px;
    height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -450px;
    .protocolMain {
      width: 100%;
      height: 710px;
      background: #fff;
      border-radius: 6px;
      padding: 0 32px;
      .title {
        padding: 20px 0;
        text-align: center;
        color: #333333;
        font-size: 20px;
        font-weight: bold;
      }

      .content-main {
        color: #333;
        line-height: 20px;
        overflow-y: auto;
        height: 500px;
      }
    }
  }

  .sureBbtn {
    text-align: center;
    margin-top: 60px;

    .el-button {
      width: 180px;
      height: 46px;
      // line-height: 46px;
    }
  }
}
</style>
